<template lang="pug">
  div
    el-card(shadow="never")
      el-row(:gutter="12")
        el-col.tr(:span="4")
          img.vm(src="~@/assets/cjda_title02.png" style="height: 48px;")
        el-col(:span="10")
          el-input(v-model="keyword" placeholder="请输入姓名/身份证号" style="width: 100%" clearable)
            a(href="javascript:" slot="suffix" @click="searchHandle")
              i(class="el-icon-search el-input__icon")
        el-col(:span="4")
          .table-operator
            upload-file(:rest="{bioType: 12}" accept="image/*" :showFileList="false" @uploadFile="uploadSearch")
              el-button(type="primary") 上传图片搜索
    tab-wrapper.mt12(@tabClick="tabChange")
      el-card.tableFilter(:body-style="{padding: '0 10px'}" v-if="curTab === 'userFile'")
        form-box(
          style="padding: 0 10px 10px 10px"
          :items="userFileFilterItems"
          :isFilter="true"
          :searchHandle="searchHandle"
        )
      el-card.tableInnerWrapper(:body-style="{padding: '0 10px'}")
        el-row(:gutter="12" class="mt20" v-if="listData.length > 0" v-loading="loading")
          el-col(:xs="24" :sm="8" :md="4" :xl="4" v-for="item in listData" :key="item.personId" class="itemBox")
            el-card(:body-style="{ padding: '0px' }")
              a-image(:url="item.photoAddress" height="216px")
              .picInfo(@click="() => clickPersonHandle(item)" style="cursor: pointer")
                p(class="mt5") 姓名：{{item.name}}
                p {{item.idcard}}
        el-pagination(
          hide-on-single-page
          background
          class="mt16 tr"
          layout="total, prev, pager, next, jumper"
          @current-change='paginationChange'
          :page-size='pageSize'
          :total="total"
          :current-page="pageNo"
        )
</template>
<script>
import { UploadFile } from '@/components'
import TabWrapper from '@/pages/TabWrapper'

export default {
  components: {
    UploadFile
  },
  components: {
    TabWrapper
  },
  computed: {
    userFileFilterItems () {
      return [
        {
          label: '人员类别',
          key: 'userType',
          type: 'selectdict',
          dictKey: 'userType'
        },
        {
          label: '认证状态',
          key: 'recogType',
          type: 'selectdict',
          dictKey: 'recogType'
        }
      ]
    }
  },
  data () {
    return {
      curTab: 'certificationRecords',
      loading: false,
      listData: [],
      pagination: {}
    }
  },
  methods: {
    tabChange (val) {
      this.curTab = val
    },
    searchHandle () {},
    uploadSearch () {}
  }
}
</script>
